<template>
	<view>
		<!-- pay支付页 -->
		<!-- 1.0 选择收货地址 -->
		<view @tap="chooseAddressHandle" class="address">
			<!-- 有用户名的时候才显示收货地址的布局 -->
			<block v-if="address.userName">
				<text class="address_detail">{{ addressDetail }}</text>
				<text space="emsp" class="address_userinfo">{{ address.userName }}  {{ address.telNumber }}</text>
			</block>
			<!-- 如果没有用户名，准备一个提示用的按钮即可，点击的时候会触发父元素的事件 -->
			<block v-else>
				<button>点击获取收货地址</button>
			</block>
		</view>
		<!-- 2.0 已选商品 -->
		<view class="choose">
			<!-- 外面写 v-for 循环 -->
			<block v-for="item in cartList" :key="item.goods_id">
				<!-- 条件渲染 v-if -->
				<view v-if="item.goods_check" class="choose_item">
					<!-- 商品展示组件 -->
					<goodsItem :item="item"/>
					<text class="choose_item_count">x{{item.goods_count}}</text>
				</view>
			</block>
		</view>
		<!-- 3.0 底部结算栏 -->
		<view class="bottom">
			<!-- 价格合计 -->
			<text class="bottom_total">
				<text class="bottom_total_text">合计:</text>
				<text class="goods_price">{{ totalPrice }}</text>
			</text>
			<!-- 结算按钮 -->
			<view 
				@tap="payMoney" 
				class="bottom_btn"
			>
			去支付({{totalCount}})
			</view>
		</view>
	</view>
</template>

<script>
/* 
	1. 收获地址
			wx.chooseAddress	获取用户收货地址
			获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。
	2. 选中的商品列表
			- 展示购物车中选中状态的商品。
			- 没有了购物车页的商品选择按钮，计数器也变成单纯的数字展示
*/
	import goodsItem from '@/components/goodsItem/main';
	// uni-app 行为写这里
	export default {
		components:{
			goodsItem
		},
		data() {
			return {
				// 用户收货地址
				address: {},
				cartList: [],
			}
		},
		computed:{
			// 计算商品总价格
			totalPrice(){
				// 初始化总价格为 0
				let totalPrice = 0;
				// 遍历数组每一项 
				this.cartList.forEach(item=>{
					// 当前商品是否为选中状态
					if(item.goods_check){
						// 把选中商品的 单价 * 数量 结果累加到 总金额中。
						totalPrice += item.goods_price * item.goods_count;
					}
				})
				// 返回计算结果
				return totalPrice;
			},
			// 选中商品数量 - 这部分业务不同公司规则有些差异，如果不确定可以和产品经理沟通
			totalCount(){
				// 淘宝：选中商品 <种类数量>
				// return this.cartList.filter(item=>item.goods_check).length;

				// 京东：选中商品 <总件数> - 业务类似计算商品总价格
				let totalCount = 0;
				this.cartList.forEach(item=>{
					if(item.goods_check){
						totalCount += item.goods_count;
					}
				});
				return totalCount;
			},
			// 计算用户的详细地址
			addressDetail(){
				// 提取出需要拼接的 省份，城市，区域，详细地址
				const {provinceName, cityName, countyName, detailInfo} = this.address;
				// 用加号连接成一个完整的详细地址
				return provinceName + cityName + countyName + detailInfo;
			}
		},
		onLoad() {
			// 获取本地存储的地址，更新到 data 中
			this.address = uni.getStorageSync('address') || {};
			this.cartList = uni.getStorageSync('cartList') || [];
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 支付按钮
			payMoney(){
				console.log('点击调用微信支付功能');
				const token = uni.getStorageSync('token');
					// 1. 未登录 - 去登录
				if(!token){
					// 1.1 小程序端跳转授权页
					/* #ifdef MP-WEIXIN */
					uni.navigateTo({ url: '/pages/auth/main' });
					/* #endif */
					// 1.2 浏览器端跳转到填表单的登录页
					/* #ifdef H5 */
					uni.navigateTo({ url: '/pages/login/main' });
					/* #endif */
				}else{
					// 2. 已登录 - 实现支付
					this.payMoneyFlow();
				}
			},
			// 支付流程
			async payMoneyFlow(){
				// 获取本地存储的 token
				const token = uni.getStorageSync('token');
				// 准备 goods 参数
				// console.log('cartList',this.cartList);
				const goods = this.cartList
					.filter(item=>item.goods_check)
					.map(item=>({ 
						goods_id: item.goods_id, 
						goods_number: item.goods_count,
						goods_price: item.goods_price
					}));

				// 通过 try_catch 捕获 await 同步代码可能出现的错误
				try{
				// 1. 创建订单
				const { order_number } = await this.$https.post(
					'/my/orders/create',
					// 易错点：axios要求，先写请求体 data，再写请求头 headers
					{
						order_price: this.totalPrice,
						consignee_addr: this.addressDetail,
						goods
					},
					// { headers: { Authorization: token } },
				);
				console.log('1.创建订单成功，获取订单号', order_number);
				// 2. 准备预支付参数
				const { pay } = await this.$https.post(
					'/my/orders/req_unifiedorder',
					{ order_number },
					// { headers: { Authorization: token } },
				);
				console.log('2.预付订单生成成功，用于微信支付的参数', pay);
				// 3. 发起微信支付 - 各个端支付接口有差异，所以需要写条件编译
				/* #ifdef MP-WEIXIN */
				// 注意不能省略 await，因为查询订单在支付流程之后
				await wx.requestPayment({...pay});   
				/* #endif */
				// 4. 更新订单支付状态
				const title = await this.$https.post(
					'/my/orders/chkOrder',
					{ order_number },
					// { headers: { Authorization: token } },
				);
				// console.log(title);
				uni.showToast({ title });
				// 支付成功(替换到)订单页，显示《待发货》列表
				uni.redirectTo({ url: '/pages/order/main?type=3' });
				}
				// try 包起来的结构中如果出现错误，在 catch 结构中能捕获到错误
				catch(err){
					// console.log('捕获支付失败的原因',err);
					// 提示用户支付失败
					uni.showToast({ title: '支付失败', icon:'none' });
					// 付成功(替换到)订单页，但是显示《待付款》列表
					uni.redirectTo({ url: '/pages/order/main?type=2' });
				}
				this.afterPayMoneyFlow();
			},
			// 支付流程后业务处理
			afterPayMoneyFlow(){
				// 删除购物车已经下单的商品(过滤出没选中的商品)
				const newCartList = this.cartList.filter(item=>item.goods_check === false);
				// console.log(newCartList);
				uni.setStorageSync('cartList', newCartList);
				// 跳转页面
			},
			chooseAddressHandle(){
				// console.log('选择收货地址');
				// 情况1：小程序端可以直接调用选择收货地址功能
				/* #ifdef MP-WEIXIN || MP-ALIPAY */
				uni.chooseAddress({
					success: address =>{
						// console.log(res);
						// delete 可以删除对象中的某个属性，注意如果出现了错误的 import { delete } 请手动删除掉
						delete address.errMsg;
						// 把用户收货地址更新到 data 中
						this.address = address;
						// 把用户选择的收货地址保存到本地存储中
						uni.setStorageSync('address', address);
					}
				});
				/* #endif */
				// 情况2：浏览器端不支持收货地址选择，提示功能升级中...
				/* #ifdef H5 || APP-PLUS */
				uni.showToast({ title: '功能升级中...', icon: 'none' });
				/* #endif */
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F9F9F9;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.address{
		height: 188rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.address_detail{
			font-size: 30rpx;
			font-weight: 700;
			color:#111;
		}
		.address_userinfo{
			font-size: 26rpx;
			color:#434343;
		}
	}
	.choose{
		margin-top: 20rpx;
		background-color: #fff;
		.choose_item{
			position: relative;
			.choose_item_count{
				position: absolute;
				right: 20rpx;
				bottom:20rpx;
			}
		}
	}
		// 2.0 底部栏
	.bottom {
		padding: 0 20rpx;
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		height: 84rpx;
		border-top: 1rpx solid #ddd;
		background-color: #fff;
		display: flex;
		align-items: center;
		.bottom_total {
			display: flex;
			align-items: center;
			.bottom_total_text {
				font-size: 26rpx;
				color:#333;
				margin-right: 4rpx;
			}

			.goods_price {
				font-size: 28rpx;
			}
		}

		.bottom_btn {
			background-color: #EA4350;
			width: 150rpx;
			height: 52rpx;
			border-radius: 26rpx;
			font-size: 22rpx;
			color:#fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 20rpx;
			&.disabled{
				background-color: #ccc;
			}
		}
	}
</style>
